<template>
  <a-drawer title="企业信息" :visible="visible"
            width="1100"
            @close="closeDrawer"
            destroy-on-close>
    <div class="detail-info  ">
      <div class="header flex justify-between align-center ">
        <div class="flex align-start">
          <div class="company-name">{{ detail?.name }}</div>
          <a-tag class="ml-10 mt-5"
                 :ST="statusColor[detail?.regStatus]?statusColor[detail?.regStatus]:''">
            {{ detail?.regStatus }}
          </a-tag>
        </div>
        <a-space>
          <a-button type="primary" ghost @click="addRule">添加线索</a-button>
          <a-button type="primary" ghost @click="exportPhoto" :loading="isExport">导出画像
          </a-button>
        </a-space>
      </div>
      <a-row class="mt-20" :gutter="[0,12]">
        <a-col span="8">社会信用代码：<span class="ml-5">{{ detail?.creditCode }}</span></a-col>
        <a-col span="8">法定代表人：<span class="ml-5">{{ detail?.legalPersonName }}</span></a-col>
        <a-col span="8">所在省份：{{ item.base || "--" }}</a-col>
        <a-col span="8">机构类型：{{ item.company_type || "--" }}</a-col>
        <a-col span="8">组织机构代码：<span class="ml-5">{{ detail?.orgNumber }}</span></a-col>
        <a-col span="8">注册资本：<span class="ml-5">{{ detail?.regCapital }}</span></a-col>
        <a-col span="8">成立日期：<span class="ml-5">{{
            detail?.estiblishTimeTxt || "--"
          }}</span></a-col>
        <a-col span="8">注册号：<span class="ml-5">{{ detail?.regNumber }}</span></a-col>
        <a-col span="8">经营开始时间：<span class="ml-5">{{ detail?.fromTimeTxt || "--" }}</span>
        </a-col>
        <a-col span="8">经营结束时间：<span class="ml-5">{{ detail?.toTimeTxt || "--" }}</span>
        </a-col>
        <a-col span="8" class="flex align-center">公司网址：
          <div @click="toWebsit" class="text-blue ml-5" style="cursor: pointer">{{
              detail?.websiteList || "--"
            }}
          </div>
        </a-col>
        <a-col span="8">核准时间：<span class="ml-5">{{ detail?.approvedTimeTxt }}</span>
        </a-col>
        <a-col span="24">企业联系方式：<span class="ml-5">{{ detail?.phoneNumber }}</span></a-col>
        <a-col span="24" class="flex">
          <span>经营范围：</span>
          <span class="flex-1 ml-5 " style="color: #999">{{ detail?.businessScope }}</span>
        </a-col>
      </a-row>

      <!--    添加线索-->
      <AttractingAddRuleModal :list="companyList" :visible="ruleAddVisible"
                              @cancel="ruleAddVisible=false"
                              @success="addRuleSuccess"/>

    </div>
  </a-drawer>
</template>

<script>
import {reactive, watch, toRefs, ref} from "vue"
import AttractingAddRuleModal
  from '@/views/village/BusinessManage/modules/AttractingAddRuleModal.vue'
import request from '@/common/utils/request'
import dayjs from 'dayjs'
import utils from '@/common/utils/utils'
import {xlsx} from '@/common/utils/xlsx'
import {message} from 'ant-design-vue'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    AttractingAddRuleModal,
  },
  setup(props, context) {
    const state = reactive({
      ruleAddVisible: false,
      detail: undefined,
      companyList: [],
      isExport: false,
      statusColor: {
        "正常": "green",
        "存续": "green",
        "在业": "green",
        "吊销": "red",
        "注销": "red",
        "停业": "red",
        "清算": "orange",
        "撤销": "orange",
        "迁出": "blue",
        "迁入": "cyan",
      },
    })

    const init = () => {

      const params = {
        keyword: props.item.id
      }
      request.post("/org", "/business/clue/getCustomerDetailByData", params).then(res => {
        console.log(res)
        state.detail = res.detail
        state.detail.fromTimeTxt = res.detail.fromTime ? formatTime(res.detail.fromTime) : "--"
      })
    }

    const addRuleSuccess = () => {
      state.ruleAddVisible = false
      context.emit("success")
    }
    const addRule = () => {
      if (!state.detail?.phoneNumber) {
        message.error("该企业暂无联系方式，不支持添加线索！")
        return
      }
      state.ruleAddVisible = true
      state.detail.base = props.item.base;
      state.detail.companyType = props.item.company_type;
      state.detail.contactInformation = state.detail?.phoneNumber;
      state.companyList = [state.detail]

    }
    const columns = ref([
      {
        title: "公司名称",
        key: "name"
      },
      {
        title: "企业状态",
        key: "regStatus"
      },

      {
        title: "核准时间",
        key: "approvedTimeTxt"
      },
      {
        title: "法人",
        key: "legalPersonName"
      },
      {
        title: "所在地区",
        key: "base"
      },
      {
        title: "企业ID",
        key: "id"
      },
      {
        title: "联系方式",
        key: "phoneNumber"
      },
      {
        title: "统一社会信用代码",
        key: "creditCode"
      },
      {
        title: "机构类型",
        key: "companyType"
      },
      {
        title: "组织机构代码",
        key: "orgNumber"
      },
      {
        title: "成立日期",
        key: "estiblishTimeTxt"
      },
      {
        title: "注册号",
        key: "regNumber"
      },
      {
        title: "注册资本",
        key: "regCapital"
      },
      {
        title: "经营开始时间",
        key: "fromTimeTxt"
      },
      {
        title: "经营结束时间",
        key: "toTimeTxt"
      },

    ])
    const exportPhoto = () => {
      let listHanders = {};
      listHanders = columns.value.reduce((obj, v) => {
        obj[v.key] = v.title;
        return obj;
      }, {});
      state.isExport = true;


      state.detail.base = props.item.base;
      state.detail.companyType = props.item.company_type;

      const tempList = [state.detail]
      let list = utils.deepClone(tempList);
      xlsx(list, listHanders, state.detail.name || '大数据获客');
      message.success("导出成功,请等待文件生成");
      state.isExport = false;

    }


    const closeDrawer = () => {
      console.log(11111111)
      context.emit("closeDetail")
    }


    const formatTime = (time) => {
      return dayjs(time).format('YYYY-MM-DD')
    }

    watch(() => props.visible, (val) => {
      if (val) {
        init()
      } else {
        state.companyList = []

      }
    })

    const toWebsit = () => {
      window.open(state.detail.websiteList)
    }


    return {
      closeDrawer,
      ...toRefs(state),
      exportPhoto,
      addRule,
      addRuleSuccess,
      toWebsit,

    }
  }
}
</script>

<style lang="less" scoped>
.detail-info {

  max-height: 100%;
  overflow: auto;
  padding: 15px;

  .company-name {
    color: #333333;
    font-size: 22px;
    font-weight: 600;
  }

  .member-list {
    border-radius: 5px;
    border: 1px solid #cccccc;
    padding: 10px 15px;

    .name {
      font-weight: 600;
    }
  }
}
</style>